<template>
  <div class="strut-div">
    <div class="building-window">
      <div class="building-title">建设规划</div>
      <div class="build-main">
        <div class="num-chart">
          <div class="num-circle">
            <p class="num"><coun-to :end="buildNumDetail.company"></coun-to></p>
            <p class="txt">重点企业数</p>
          </div>
          <div class="arrow-box">
            <img src="@/assets/imgs/tg/arrow-icon.png" alt="arrow" />
          </div>
          <div class="num-circle">
            <p class="num"><coun-to :end="buildNumDetail.area"></coun-to></p>
            <p class="txt">占地面积(亩)</p>
          </div>
          <div class="arrow-box">
            <img src="@/assets/imgs/tg/arrow-icon.png" alt="arrow" />
          </div>
          <div class="num-circle">
            <p class="num"><coun-to :end="buildNumDetail.core"></coun-to></p>
            <p class="txt">核心区占地(亩)</p>
          </div>
        </div>
        <div class="desc-box">
          <p class="txt">
            农谷核心区面积/总面积
            <span class="sub-txt">(平方公里)</span>
          </p>
          <p class="num">
            <span class="y-num">200</span>/<span class="b-num">1050</span>
          </p>
        </div>
      </div>
    </div>
    <div class="window-item industry-window">
      <div class="window-title">
        <img src="@/assets/imgs/tg/menu-icon.png" alt="menu" />
        产业结构
      </div>
      <div class="window-main">
        <common-bar-chart ref="industrialStructureBar" :config="industrialStructureBarConfig"></common-bar-chart>
      </div>
    </div>
    <div class="window-item economic-window">
      <div class="window-title">
        <img src="@/assets/imgs/tg/menu-icon.png" alt="menu" />
        经济发展
      </div>
      <div class="window-main">
        <common-mix-chart ref="economicDev" :config="economicDevConfig"></common-mix-chart>
      </div>
    </div>
  </div>
</template>
<script>
import CommonBarChart from "@/components/common/common-bar-chart.vue";
import CommonMixChart from "@/components/common/common-mix-chart.vue";
import CounTo from '@/components/count-to';

import { industryStructBarChart, colorList, economicDevelopBarChart, oneCityThreeParkFiveArea } from "@/network/tg-fake-data.js";

export default {
  name: "ng-left",
  components: {
    CommonBarChart,
    CommonMixChart,
    CounTo
  },
  props: ['buildIndex'],
  data() {
    return {
      industrialStructureBarConfig: {
        option: {
          id: "industrialStructureBar",
          xAxis: industryStructBarChart.years,
          y: []
        }
      },
      economicDevConfig: {
        option: {
          legend: {
            data: economicDevelopBarChart.names,
            textStyle: {
              fontSize: 14
            }
          },
          id: "economicDev",
          xAxis: economicDevelopBarChart.xAxis,
          yAxis: [
            {
              type: "value",
              min: 0,
              max: 100,
              name: "单位（亿元）",
              axisLabel: {
                formatter: "{value}"
              },
              splitLine: {
                show: false
              } //去除网格线
            },
            {
              type: "value",
              min: 0,
              max: 20,
              name: "增长率（%）",
              axisLabel: {
                formatter: "{value}%"
              },
              splitLine: {
                show: false
              } //去除网格线
            }
          ],
          series: [
            {
              name: economicDevelopBarChart.datas[0].name,
              type: "bar",
              data: economicDevelopBarChart.datas[0].data,
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00FFED" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#00AEFF" // 100% 处的颜色
                  }
                ]
              },
              label: {
                show: true,
                position: "top",
                formatter: "{c}",
                color: "#00FFED",
                fontSize: 14
              },
              barWidth: 22 //柱图宽度
            },
            {
              name: economicDevelopBarChart.datas[1].name,
              type: "line",
              yAxisIndex: 1,
              data: economicDevelopBarChart.datas[1].data,
              itemStyle: {
                color: "#F6FF00"
              },
              label: {
                show: true,
                position: "top",
                formatter: "{c}%",
                color: "#FFF",
                fontSize: 14
              }
            }
          ]
        }
      },
      buildNumDetail: {
        company: 0,
        area: 0,
        core: 0
      }
    };
  },
  mounted() {
    this.initIndustrialStructureConfig();
    this.initEconomicDev();
    this.buildNumDetail = this.buildIndex == 0 ? oneCityThreeParkFiveArea[9] : oneCityThreeParkFiveArea[this.buildIndex-1];
  },
  methods: {
    initIndustrialStructureConfig() {
      industryStructBarChart.dimension.map((item, index) => {
        var bar = {
          title: item,
          data: industryStructBarChart.industryDatas[index],
          color: colorList[index],
          stack: "1",
          position: "inside"
        };
        if (index == 0) {
          bar.axis = {
            min: 0,
            max: 0,
            name: "单位(亿元)"
          };
        }
        this.industrialStructureBarConfig.option.y.push(bar);
      });
      this.$refs.industrialStructureBar.initChart();
    },
    initEconomicDev(){
      this.$refs.economicDev.initChart();
    },
  },
  watch: {
    buildIndex() {
      this.buildNumDetail = this.buildIndex == 0 ? oneCityThreeParkFiveArea[9] : oneCityThreeParkFiveArea[this.buildIndex-1];
    }
  }
};
</script>
<style lang="scss" scoped>
.building-window {
  width: 470px;
  height: 270px;
  background: url("../../../assets/imgs/tg/leftop-window.png") no-repeat center
    center;
  background-size: contain;
  float: right;
  .building-title {
    width: 100%;
    height: 68px;
    line-height: 68px;
    padding-left: 36px;
    font-size: 22px;
    color: #aaddff;
  }
  .build-main {
    .num-chart {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 26px 0 62px;

      .num-circle {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 96px;
        height: 96px;
        background: url("../../../assets/imgs/tg/circle-bg.png");

        .num {
          font-size: 18px;
          font-weight: bold;
          color: #f7cc49;
        }
        .txt {
          font-size: 10px;
          color: #aaddff;
        }
      }
    }
    .desc-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 402px;
      height: 57px;
      margin: 28px 0 0 55px;
      background: url("../../../assets/imgs/tg/top-window-txt.png");

      .txt {
        flex: 6;
        text-align: center;
        font-size: 14px;
        color: #aaddff;
        .sub-txt {
          font-size: 10px;
        }
      }
      .num {
        flex: 4;
        text-align: center;
        font-size: 28px;
        color: #4f6778;
        .y-num {
          color: #ffb956;
        }
        .b-num {
          color: #77c8ff;
        }
      }
    }
  }
}

.window-item {
  width: 430px;
  background: url("../../../assets/imgs/tg/chart-window.png") no-repeat;
  background-size: 100% 100%;
  .window-title {
    height: 70px;
    line-height: 70px;
    font-size: 22px;
    color: #aaddff;
    padding-left: 20px;
    > img {
      vertical-align: middle;
    }
  }
  .window-main {
    height: calc(100% - 70px);
  }
}
.industry-window {
  height: 380px;
  float: right;
  margin-top: 20px;
}

.economic-window {
  height: 300px;
  float: right;
  margin-top: 20px;
}
</style>